a:hover
  text-decoration-thickness: 1px

a.headerlink
  user-select: none
  cursor: pointer
  font-size: 0
  line-height: 0

  &::before
    content: ""
    display: inline-block
    background-image: url("../images/icons/link-icon.svg")
    background-size: contain
    background-repeat: no-repeat
    background-position: center
    width: 16px
    height: 16px

h1 > a.headerlink::before, h2 > a.headerlink::before
  width: 24px
  height: 24px

// Social links styling
.social-links
  margin-top: 1.5rem
  margin-bottom: 1.5rem

  #social-links-table
    display: flex
    flex-direction: column
    gap: 1rem

    tbody
      display: flex
      flex-direction: column

      tr
        display: flex
        flex-direction: column

        th
          padding: 0
          border: none
          text-align: center
          margin-bottom: 1rem
          display: block

          a
            display: inline-flex
            align-items: center
            justify-content: center
            padding: 1rem
            border: 1px solid var(--color-background)
            border-radius: 12px
            color: var(--pst-color-link)
            font-weight: 500
            font-size: 16px
            transition: all 0.3s ease
            text-decoration: none
            width: 100%
            letter-spacing: 0.14px;

            &:hover
              background-color: var(--color-background)

          img
            width: 24px
            height: 24px
            object-fit: contain
            margin-right: 0.5rem

    @media (min-width: 960px)
      flex-direction: row

      tbody
        flex-direction: row

        tr
          display: flex
          flex-direction: row
          gap: 32px

          th
            display: flex
            margin-bottom: 0

            a
              max-width: 280px

// Notebook links
.fo-notebook-links
  margin-top: 1.5rem
  margin-bottom: 1.5rem
  width: 100%
  display: flex
  flex-direction: column
  gap: 1rem

  tbody
    display: flex
    flex-direction: column

    tr
      display: flex
      flex-direction: column

      td
        padding: 0
        border: none
        text-align: center
        margin-bottom: 1rem
        display: block

        a
          display: inline-flex
          align-items: center
          justify-content: center
          padding: 1rem
          border: 1px solid var(--color-background)
          border-radius: 12px
          color: var(--pst-color-link)
          font-weight: 500
          font-size: 14px
          transition: all 0.3s ease
          text-decoration: none
          width: 100%

          &:hover
            background-color: var(--color-background)

        img
          width: 24px
          height: 24px
          object-fit: contain
          margin-right: 0.5rem

  @media (min-width: 960px)
    flex-direction: row

    tbody
      flex-direction: row

      tr
        display: flex
        flex-direction: row
        gap: 32px

        td
          display: flex
          margin-bottom: 0

          a
            max-width: 280px
  